<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <my-form :form='queryParams' :options="queryParamsForm" style="float:left;"></my-form>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px;">
            <el-col :span='6'>
                <el-button-group>
                    <el-button type="primary" :class="{selectBtn:statusSelect == 0}" @click="btn(0)" plain>全部</el-button>
                    <el-button type="primary" :class="{selectBtn:statusSelect == 1}" @click="btn(1)" plain>待发货</el-button>
                    <el-button type="primary" :class="{selectBtn:statusSelect == 2}" @click="btn(2)" plain>待收货</el-button>
                    <el-button type="primary" :class="{selectBtn:statusSelect == 3}" @click="btn(3)" plain>已完成</el-button>
                </el-button-group>
            </el-col>
            <el-col :span='18'>
                <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <el-table v-loading='loading' :data='list' >
            <el-table-column label="ID" prop='id'/>
           
            <el-table-column label="商品" prop='picUrl'  width='350'>
                <template slot-scope='scope'>
                    <div>订单号：{{scope.row.outTradeNo}}</div>
                    <div style="display:flex">
                        <div style="padding-top:5px;">
                            <img style='width:60px; height:60px;' :src='scope.row.picUrl'>
                        </div>
                        <div style="margin-left:10px;">
                            <div>商品ID：{{scope.row.itemId}}</div>
                            <strong>{{scope.row.goodsDetail}}</strong><br/>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商品价格" prop='totalPrice'/>
            <el-table-column label="用户" prop='uid'>
                <template slot-scope="scope">
                    <div>用户ID:{{scope.row.uid}}</div>
                    <div>升级类型:</div>
                </template>
            </el-table-column>
            <el-table-column label="收货" prop='realName' width='150'>
                <template slot-scope="scope">
                    <div>姓名:{{scope.row.realName}}</div>
                    <div>手机:{{scope.row.userPhone}}</div>
                </template>
            </el-table-column>
            <el-table-column label="支付方式" prop='payType'>
                <template slot-scope='scope'>
                    <div v-if="scope.row.payType =='wxpay_app' ">微信支付</div>
                    <div v-else-if="scope.row.payType =='alipay_app'">支付宝支付</div>
                    <div v-else>{{scope.row.payType}}</div>
                </template>
            </el-table-column>
            <el-table-column label="支付状态" prop='payStatus'>
                <template slot-scope='scope'>
                    <div v-if="scope.row.payStatus ==0 " style="color:#000" >待支付</div>
                    <div v-else-if="scope.row.payStatus ==1 " style="color:green" >已支付</div>
                    <div v-else>{{scope.row.payStatus}}</div>
                </template>
            </el-table-column>
            <el-table-column label="入单时间" prop='payTime'>
                <template slot-scope='scope'>
                    <div v-if="scope.row.payTime">{{scope.row.payTime.replace('T',' ').substring(0,16)}}</div>
                </template>
            </el-table-column>
            <el-table-column label="订单状态" prop='status'>
                <template slot-scope='scope'>
                    <div v-if="scope.row.status ==0 " style="color:#000" >待支付</div>
                    <div v-else-if="scope.row.status ==1 " style="color:#E6A23C" >待发货</div>
                    <div v-else-if="scope.row.status ==2 " style="color:#F56C6C" >待收货</div>
                    <div v-else-if="scope.row.status ==3 " style="color:#67C23A" >已收货</div>
                    <div v-else-if="scope.row.status ==4 " style="color:#67C23A" >已完成</div>
                    <div v-else>{{scope.row.status}}</div>
                </template>
            </el-table-column>
            
            <el-table-column label="创建日期" prop='createdAt'>
                <template slot-scope='scope'>
                    <div v-if="scope.row.createdAt">{{scope.row.createdAt.replace('T',' ').substring(0,16)}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope='scope'>
                    <el-button size='mini' type='text' icon='el-icon-truck' v-if='scope.row.status==1 || scope.row.status==2 ' @click='handleLogistics(scope.row)' >发货</el-button>
                    <el-button size='mini' type='text' icon='el-icon-shopping-cart-full' v-if='scope.row.status==1 || scope.row.status==2 ' @click='handleWithdrawal(scope.row)' >自提</el-button>
                    <el-button size='mini' type='text' icon='el-icon-view'  @click='handleView(scope.row)' >查看详情</el-button>
                </template>
            </el-table-column>

            
        </el-table>

        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="orderListHander"  />
        <!-- 订单详情 -->
        <el-dialog title="详细内容" :visible.sync="openView" width="1200px" append-to-body>
            <div style="font-size:14px;">
                <el-row>
                    <el-col :span="24"><h3>订单信息</h3></el-col>
                </el-row>
                <hr>
                <el-row>
                    <el-col :span="24">订单编号：{{details.outTradeNo}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'><img :src="details.picUrl" width='150' height='150'></el-col>
                    <el-col :span='12'>
                        <el-col>商品ID：{{details.itemId}}</el-col>
                        <el-col>商品名称：{{details.goodsDetail}}</el-col>
                        <el-col>商品价格：{{details.totalPrice}}</el-col>
                        <el-col>创建时间：{{details.createdAt}}</el-col>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><h3>用户信息</h3></el-col>
                    <hr>
                    <el-col :span="24">用户ID：{{details.uid}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><h3>支付信息</h3></el-col>
                    <hr>
                    <el-row>
                        <el-col :span="12">支付方式：
                            <span v-if='details.payType=="wxpay_app"'>微信支付</span>
                            <span v-else-if='details.payType=="alipay_app"'>支付宝支付</span>
                            <span v-else>{{details.payType}}</span>
                        </el-col>
                        <el-col :span="12">支付状态：
                            <span v-if="details.payStatus ==0 ">待支付</span>
                            <span v-else-if="details.payStatus ==1 " >已支付</span>
                            <span v-else >{{details.payStatus}}</span>
                        </el-col>
                    </el-row>
                    <el-col :span="24">支付时间：{{details.payTime}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><h3>发货信息</h3></el-col>
                </el-row>
                <hr>
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary"  plain>发货</el-button>
                    </el-col>
                    <el-col :span="12">物流公司：{{details.deliveryCompany}}</el-col>
                    <el-col :span="12">物流单号：{{details.deliverySn}}</el-col>
                    <el-col :span="12">发货时间：{{details.deliveryDate}}</el-col>
                    <el-col :span="12">自提时间：{{details.selfWithdrawalTime}}</el-col>
                    <el-col :span="12">完成时间：{{details.finishTime}}</el-col>
                    <el-col :span="12">支付宝支付单号：</el-col>
                    
                </el-row>
                <el-row>
                    <el-col :span="24"><h3>收货信息</h3></el-col>
                </el-row>
                <hr>
                <el-row>
                    <el-col :span="12">姓名：{{details.realName}}</el-col>
                    <el-col :span="12">电话：{{details.userPhone}}</el-col>
                    <el-col :span="12">省市区：{{details.province}}{{details.city}}{{details.district}}</el-col>
                    <el-col :span="12">详细地址：{{details.addressDetail}}</el-col>
                </el-row>
            </div>
            <el-row>
                <el-col :span="24"><h3>分佣明细</h3></el-col>
            </el-row>
            <hr>
            <el-row>
                <Table :list='list2'  :tableColumns='tableColumns2'  ></Table>
                <pagination  v-show="total>0"  :total="total2" :page.sync="queryParams2.pageNo" :limit.sync="queryParams2.pageSize" @pagination="getAccountitemsHandler"  />
            </el-row>
        </el-dialog>

        <el-dialog title='订单发货' :visible.sync="logisticsOpen" width="500px" append-to-body>
            <el-form ref='form' :model="logisticsform" :rules="rules" label-width="120px">
                <el-form-item label="物流公司名称" prop='deliveryCompany'>
                    <el-input v-model="logisticsform.deliveryCompany" placeholder="请输入物流公司名称" />
                </el-form-item>
                <el-form-item label="物流单号" prop='deliverySn'>
                    <el-input v-model="logisticsform.deliverySn"  />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import myForm from '@/views/components/myForm'
import Table from '@/views/components/myTable'
import { orderList,orderDelivery,putselfWithdrawal,getAccountitems,orderExport } from '@/api/ka/ka'
export default {
    components:{
        myForm,
        Table
    },
    data() {
        return{
            loading:false,
            exportLoading: false,
            openView:false,
            logisticsOpen:false,
            queryParamsForm:[
                {title:'订单号',key:'outTradeNo',type:'text',styleWidth:'240px'},
                {title:'商品名称',key:'goodsType',type:'select',styleWidth:'240px',
                    option:{
                        data:[
                            {id:'100033',label:'【晋升通道】4399礼包',value:'zj4399'},
                            {id:'100037',label:'【晋升通道】4799礼包',value:'zj4799'},
                            {id:'100034',label:'【晋升通道】4999礼包',value:'zj4999'},
                            {id:'100035',label:'【晋升通道】20000礼包',value:'zj2w'},
                            {id:'100036',label:'【晋升通道】30000礼包',value:'zj3w'},
                        ],
                        props:{  key:'id', label:'label', value:'value' },
                    }
                },
                {title:'用户ID',key:'uid',type:'text',styleWidth:'240px'},
                {title:'收货姓名',key:'realName',type:'text',styleWidth:'240px'},
                {title:'收货手机号',key:'userPhone',type:'text',styleWidth:'240px'},
                {title:'支付方式',key:'payType',type:'select',styleWidth:'240px',
                    option:{
                        data:[
                            {id:'1',label:'微信支付',value:'wxpay_app'},
                            {id:'2',label:'支付宝支付',value:'alipay_app'},
                        ],
                        props:{  key:'id', label:'label', value:'value' },
                    }
                },
                {title:'支付状态',key:'payStatus',type:'select',styleWidth:'240px',
                    option:{
                        data:[
                            {id:'1',label:'待支付',value:'0'},
                            {id:'2',label:'已支付',value:'1'},
                        ],
                        props:{  key:'id', label:'label', value:'value' },
                    }
                },
                {title:'订单状态',key:'status',type:'select',styleWidth:'240px',
                    option:{
                        data:[
                            {id:'1',label:'待支付',value:'0',color:''},
                            {id:'2',label:'待发货',value:'1',color:'#E6A23C'},
                            {id:'3',label:'待收货',value:'2',color:'#F56C6C'},
                            {id:'4',label:'已收货',value:'3',color:'#67C23A'},
                            {id:'5',label:'已完成',value:'4',color:'#67C23A'},
                        ],
                        props:{  key:'id', label:'label', value:'value' },
                    }
                },
            ],
            queryParams:{
                appIdList:process.env.VUE_APP_ID,
                pageNo: 1,
                pageSize: 10,
            },
            queryParams2:{
                pageNo: 1,
                pageSize: 10,
            },
            logisticsform:{},
            rules:{
                deliveryCompany:[{required: true, message: "物流公司不能为空", trigger: "blur"}],
                deliverySn:[{required: true, message: "物流单号不能为空", trigger: "blur"}],
                
            },
            list:[],
            tableColumns2:[
                {label:'ID',param:'id'},
                {label:'用户ID',param:'userId'},
                {label:'手机号',param:'cellphone'},
                {label:'角色',param:'roleLevel',
                    render:row=>{
                        if(row.roleLevel == '2-1742'){
                            return '经销商'
                        }else if(row.roleLevel == '2-1741'){
                            return '经理'
                        }else if(row.roleLevel == '2-0'){
                            return '会员'
                        }else {
                            return row.roleLevel
                        }
                    }
                },
                {label:'网体',param:'fttLevel'},
                {label:'姓名',param:'idname'},
                {label:'来源手机号',param:'name'},
                {label:'类目',param:'acctc',
                    render:row=>{
                        if(row.acctc == 'pinmoney'){
                            return '零钱'
                        }else if(row.acctc == 'referralProfit'){
                            return '推荐收益'
                        }else if(row.acctc == 'teamProfit'){
                            return '团队收益'
                        }else if(row.acctc == 'fttProfit'){
                            return '网体收益'
                        }else {
                            return row.acctc
                        }
                    }
                },
                {label:'交易额',param:'value'},
                {label:'佣金比例',param:'proportion'},
                {label:'对方用户ID',param:'anotherUserId'},
                {label:'创建时间',param:'createdAt',
                    render: row => {
                        if(!row.createdAt){
                            return '-'
                        }
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },

            ],
            list2:[],
            total:0,
            total2:0,
            statusSelect:null,
            details:{}
        }
    },
    created(){
        
        this.orderListHander()
    },
    methods:{
        clickButton(val){
            this[val.methods](val.row)
        },
        //获取数据
        orderListHander(data){
            data = this.addDateRange(this.queryParams)
            orderList(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                    
                }
            })
        },
        //发货
        handleLogistics(row){
            this.logisticsOpen = true
            this.logisticsform.id = row.id
            
        },
        //确认发货
        submitForm(){
            this.$refs["form"].validate(valid=>{
                if(valid){
                    orderDelivery(this.logisticsform).then(res=>{
                        this.msgSuccess("成功发货");
                        this.logisticsOpen =  false;
                        this.orderListHander()
                    })
                }
            })
        },
        //取消发货
        cancel(){
            this.logisticsOpen = false
            this.reset()
        },
        //表单重置
        reset(){
            this.logisticsform = {
                deliveryCompany:undefined,
                deliverySn:undefined,
            }
        },
        //自提
        handleWithdrawal(row){
            console.log(row)
            let data = {
                id:row.id
            }
            this.$confirm('确认客户已自提货品?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function() {
                return putselfWithdrawal(data);
            }).then(() => {
                this.msgSuccess("自提成功");
                this.orderListHander()
            }).catch(() => {});
        },
        //详情
        handleView(row){
            this.openView = true
            this.details = row
            this.getAccountitemsHandler(row)
            
        },
        getAccountitemsHandler(row){
            this.queryParams2.relId = row.id
            this.queryParams2.relType = 'Order'
            let data = this.addDateRange(this.queryParams2)
            getAccountitems(data).then(res=>{
                if(res.data.code == 200){
                    let rows = res.data.rows
                    let rowsArr = []
                    rows.forEach(item=>{
                        if(item.acctc == 'referralProfit' || item.acctc == 'teamProfit' ){
                            item.proportion =  item.value/this.details.totalPrice*100 +'%'
                            rowsArr.push(item)
                        }
                    })
                    this.list2 = rowsArr
                    this.total2 = res.data.total
                }
            })
        },
        //搜索
        handleQuery(obj){
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.orderListHander()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
            this.searchReset()
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                mobile:'',
            }
        },
        //切换
        btn(val){
            let data = this.addDateRange(this.queryParams)

            if(val == 0){
                this.statusSelect = 0
                delete data.status
            }else if(val == 1){
                this.statusSelect = 1
                data.status = 1
            }else if(val == 2){
                this.statusSelect = 2
                data.status = 2
            }else if(val == 3){
                this.statusSelect = 4
                data.status = 4
            }
            this.orderListHander(data)
            
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams =this.queryParams;
            console.log(queryParams)
            this.$confirm("是否确认导出所有订单数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return orderExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        }
    }
}
</script>
<style scoped>
.selectBtn {
    background:#1890ff;
    color:#fff;
}
</style>
